<template> 
   <div class="ad-component" :class="{isPhone:isPhone}">
   		<div class="direction" >
   		<a :href="item.url"  :key="index" v-for="(item,index) in items" target="_blank">
   			<img :src="item.image">
   			<p>{{item.title}}</p>
   		</a>
			
   		</div>
	   	<div class="direction-l" >
	   		<a :href="iteml.url" :key="index" v-for="(iteml,index) in itemsL" target="_blank">
	   			<img :src="iteml.image" >
	   			<p>{{iteml.title}}</p>
	   		</a >
   					
   		</div>
   </div>
</template>

<script>
export default {
	components:{
		
	},
	data(){
		let items = [];
		let itemsL = [];
		 this.$http.get("v1"+"/"+2+"/"+"slide",{
            }).then(res=>{
                if(res.data.success){
                	for(let i=0;i<res.data.infor.length;i++){
                		if(i%2){
                			itemsL.push(res.data.infor[i]);
                		}else{
                			items.push(res.data.infor[i]);
                		}
                	}
                	// console.log("广告")
                }
            })

		return{
			"items":items,
			"itemsL":itemsL,
			"isPhone":false,
		}
	},
	mounted(){
		let width=screen.width;
   		if(width<1024){
   			this.isPhone=true;
   		}else{
   			this.isPhone=false;
   		}
	
	},
}
</script>

<style lang="scss">
@import "../style/base/_base";

.isPhone{
	display: none;
}
.ad-component{
	.direction{
		position: fixed;
		right:40px;
	 	top: 140px;
	 	z-index:999;
	    a{
	    	
	 		width:100px;
	 		height:130px;
	 		img{
	 			margin: 0 auto;
		 		margin-top: 40px;
		 		width:100px;
	 			height:100px;
		   }
		   p{
		   	margin-top: 5px;
		   	text-align: center;
		   	color: #004080;
		   }
	 	}
	}
	
	.direction-l{
		position: fixed;
		left:40px;
	 	top: 140px;
	 	z-index:999;
	 	a{
	 		width:100px;
	 		height:130px;
	 		img{
		 		margin: 0 auto;
		 		margin-top: 40px;
		 		width:100px;
	 			height:100px;
		   }
		    p{
		   	margin-top: 5px;
		   	text-align: center;
		   	color: #004080;
		   }
	 	}
	   	
	}
}

</style>